<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <div class="coldiv">
            <div
              class="coldiv divicon dodgerblue"
              style="background-color: #409eff"
            >
              <i class="el-icon-coin" style="font-size: 30px; color: white"></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>项目总数</div>
              <div>
                <span style="font-size: large; font-weight: bold">13</span>个
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="coldiv">
            <div class="coldiv divicon deepskyblue">
              <i
                class="el-icon-s-data"
                style="font-size: 30px; color: white"
              ></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>设备总数</div>
              <div>
                <span style="font-size: large; font-weight: bold">5</span>个
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="coldiv">
            <div class="coldiv divicon lawngreen">
              <i
                class="el-icon-s-platform"
                style="font-size: 30px; color: white"
              ></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>运行设备</div>
              <div>
                <span style="font-size: large; font-weight: bold">0</span>个
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="coldiv">
            <div class="coldiv divicon tomato">
              <i
                class="el-icon-s-release"
                style="font-size: 30px; color: white"
              ></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>停机设备</div>
              <div>
                <span style="font-size: large; font-weight: bold">1</span>个
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="coldiv">
            <div class="coldiv divicon orange">
              <i class="el-icon-bell" style="font-size: 30px; color: white"></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>告警设备</div>
              <div>
                <span style="font-size: large; font-weight: bold">1</span>个
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="coldiv">
            <div class="coldiv divicon slategrey">
              <i
                class="el-icon-turn-off"
                style="font-size: 30px; color: white"
              ></i>
            </div>
            <div style="height: 50px" class="coltext">
              <div>未获取状态</div>
              <div>
                <span style="font-size: large; font-weight: bold">4</span>个
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="margin-top: 25px;">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <el-divider direction="vertical"></el-divider> <span>设备地区分布</span>
          </div>
          <chart></chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <el-divider direction="vertical"></el-divider><span>设备类型统计</span>
          </div>
          <chartb></chartb>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <el-divider direction="vertical"></el-divider><span>热效率</span>
          </div>
          <itable></itable>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import chart from "@/components/statistics/chart";
import chartb from "@/components/statistics/chart2";
import itable from "@/components/statistics/table";
export default {
  components: {
    chart,
    chartb,
    itable
  }
};
</script>

<style scoped>
.coldiv {
  display: flex;
  justify-content: center;
  align-items: center;
}
.coltext {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.divicon {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.dodgerblue {
  background-color: dodgerblue;
}
.deepskyblue {
  background-color: deepskyblue;
}
.lawngreen {
  background-color: lawngreen;
}
.tomato {
  background-color: tomato;
}
.orange {
  background-color: orange;
}
.slategrey {
  background-color: slategrey;
}

.el-divider--vertical{
  width: 2px;
  background-color: mediumblue;
}
</style>